<script setup>
import { Button } from 'vant';
import { ref, watchEffect } from 'vue';
import { fileSizeFormatted } from '../../utils/default-util';
import FileIcon from '../FileIcon/index.vue';

const props = defineProps({
    data: Object
})
const data = ref({})

watchEffect(() => {
    data.value = props.data
})

const exportFile = () => {
    const a = document.createElement('a')
    a.href = data.value.url;
    a.download = data.value.name;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

</script>

<template>
    <div class="root">
        <div class="layout">
            <div class="item">
                <FileIcon :filename="data.name"
                    :style="{ display: block, width: '150px', height: 'auto', margin: '0 auto' }" />
                <div>{{ data.name }}</div>
                <div>{{ fileSizeFormatted(data.size) }}</div>
                <div>
                    <Button type="success" @click="exportFile" block style="width: 90%; margin: 10px auto;">导出</Button>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.root {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.layout {
    position: fixed;
    background: white;
    width: 90%;
    // aspect-ratio: 1/1.25;
    margin: -20% auto 0 auto;
    border-radius: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.item {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;

    div {
        width: 100%;
        text-align: center;
        padding: 10px 4px;
    }
}
</style>